<template>
  <div>
    <head-top></head-top>
    <div class="table_container">
        <el-table
          :columns="columns"
          :data="tableList"
          v-loading="loading"
          element-loading-text="小猪猪正在玩命加载中，请稍候哦。。。"
          highlight-current-row
          v-model="tableList">
          <el-table-column v-for="(column, index) in columns" :key="index" :label="column.text" :width="column.width">
            <template slot-scope="scope">
              <template v-if="column.useSlot">
                <template v-if="column.value === 'orderStatus'">
                  {{ scope.row.orderStatus }}
                </template>
                <template v-if="column.value === 'operate'">
                  <el-button @click="del(scope, scope.row)" type="text">删除</el-button>
                  <el-button
                    type="text"
                    @click="test(scope.$index, scope.row)">编辑
                  </el-button>
                </template>
              </template>
              <template v-else>
                {{ scope.row[column.value] }}
              </template>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          v-if="total && total > 0"
          :current-page="currentPage"
          :page-sizes="[8, 16, 32, 64]"
          :page-size="pageSize"
          :total="total"
          layout="slot, jumper, sizes, next, pager, prev"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange">
          <slot>
            <span>
              共{{ pageCount }}页 当前为第{{ currentPage }}页
            </span>
          </slot>
        </el-pagination>
      <el-dialog
        :visible.sync="dialogVisible"
        :before-close="handleClose"
        :append-to-body="true"
        title="编辑订单"
        width="40%"
      >
        <el-form :model="orderEditForm" class="form-container">
          <div>
            <el-row>
              <el-col :span="24" >
                <div>
                  <span class="c-form-info__label-xing">* </span>订单号：
                </div>
                <el-form-item>
                  <el-input readonly v-model="orderEditForm.orderNumberr" placeholder="请输入订单号"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24" >
                <div>
                  <span class="c-form-info__label-xing">* </span>联系电话：
                </div>
                <el-form-item class="c-form-info__item c-form-info__item80">
                  <el-input v-model="orderEditForm.phoneNumber" placeholder="请输入电话方式"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row >
              <el-col :span="24" >
                <div>
                  <span class="c-form-info__label-xing">* </span>订单地址:
                </div>
                <el-form-item>
                  <el-input v-model="orderEditForm.orderAddress" placeholder="选择订单地址" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24" >
                <div>
                  <span class="c-form-info__label-xing">* </span>订单状态:
                </div>
                <el-form-item>
                  <el-input v-model="orderEditForm.orderStatus" placeholder="请选择订单状态" />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="edit()">修改</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import HeadTop from '../components/head-top';

import { ORDER_STATUS } from '../../common/dictory';

    const initForm = {
      phoneNumber: '',
      orderNumberr: '',
      orderAddress: '',
      orderStatus: '',
      operate: ''
    }
    export default {
      components: { HeadTop },
      name: 'order-list',
      data() {
        return {
          orderStatus: ORDER_STATUS,
          searchForm: Object.assign({}, initForm),
          orderEditForm: Object.assign({}, initForm),
          orderDataList: [],
          testData: '',
          collapse: true,
          dialogVisible: false,
          total: 100,
          pageCount: 10,
          pageSize: 8,
          loading: true,
          currentPage: 1,
          testDataList: [],
          total_rows: 0,
          columns: [
            {
              text: '订单号',
              value: 'orderNumberr',
              width: 150
            },
            {
              text: '订单用户',
              value: 'phoneNumber',
              width: 150
            },
            {
              text: '订单地址',
              value: 'orderAddress',
              width: 350
            },
            {
              text: '订单状态',
              value: 'orderStatus',
              width: 170,
              useSlot: true
            },
            {
              text: '操作',
              value: 'operate',
              width: 180,
              fixed: 'right',
              useSlot: true
            }
          ]
        }
      },
      computed: {
        tableList() {
          return this.orderDataList.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
        }
      },
      created(){
        var url = this.HOME + '/order/findorder';
        this.$axios.get(url)
          .then(res => {
          console.log(res.data.list);
        this.orderDataList = res.data.list;
        this.loading = false;
      }).catch(error => {
          console.log(error);
      });
      },
      methods: {
        // 切换每页显示条数
        handleSizeChange(val) {
          this.currentPage = 1
          this.pageSize = val
        },
        // 当前页改变
        handleCurrentChange(val) {
          this.currentPage = val
        },
        del(scope, row) {
          if (!scope.row.orderNumberr){
            this.orderDataList(scope.$index, 1)
          } else {
            this.$confirm('确认是否删除','提示',{
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
              center: true
            })
              .then(() => {

                this.$axios.post(this.HOME + '/order/delorder',{orderNumberr: scope.row.orderNumberr}).then(res => {
                  if(res.data.judge === true) {
                    this.$message.success('删除成功')
                    return this.orderDataList.splice(row,1);
            } else {
                    this.$message.warning(res.data.msg)}
            })
            })
            .catch(() => {
              this.$message({type: 'info',
              message: '已取消删除'
            })
            })
          }
        },
        // 编辑账号
        test(index, row) {
          this.orderEditForm = row
          this.orderEditForm.phoneNumber = row.phoneNumber
          this.orderEditForm.orderAddress = row.orderAddress
          this.orderEditForm.orderStatus = row.orderStatus
          this.dialogVisible = true
        },

        handleClose(done) {
          this.$confirm('确认关闭？')
            .then(_ => {
            done()
            //location.reload()
        })
        .catch(_ => {
        })
        },
        edit() {
          let data = {'orderNumberr': this.orderEditForm.orderNumberr, 'phoneNumber': this.orderEditForm.phoneNumber, 'orderAddress': this.orderEditForm.orderAddress, 'orderStatus': this.orderEditForm.orderStatus}
          var url = this.HOME + '/order/updateorder';
          this.$axios.post(url, data).then((res) => {
            console.log(res);
          if (res.data.judge == true) {
            this.orderNumberr = ''
            this.phoneNumber = ''
            this.orderAddress = ''
            this.orderStatus = ''
            this.$message.success('订单修改已完成')
          } else {
            console.log('error submit')
          }
        })
          this.dialogVisible = false

        }
      }
    }
</script>

<style lang="less">
  @import '../../style/mixin';
  .table_container{
    padding: 20px;
  }
</style>
